<template>
  <div
    class="Square"
    @click="handleChange">
    {{ text }}
  </div>
</template>

<script>
export default {
  name: "Square",
  props: {
    nextPlayerIsX: {
      type: Boolean,
      required: true
    },
    text: {
      type: String,
      default: ""
    },
    index: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      // text: null,
    }
  },
  methods: {
    handleChange() {
      this.$emit("getIndex", this.index)
      // console.log(this.text)
      // console.log(this.index)
      // this.text = this.nextPlayerIsX ? "X" : "O"
      // this.$emit("changeNextPlayer", !this.nextPlayerIsX)
    }
  }
}
</script>
<!--
多个子组件共用一个状态, 将状态提到共同的父级

父组件向子组件传值 props （自定义属性）
子组件向父组件传值 $emit （自定义事件）
-->
<style scoped>
.Square {
  height: 100px;
  width: 100px;
  box-sizing: border-box;
  border: 2px solid #2c3e50;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
